<template>
  <div class="notice-drawer">
    <t-drawer v-model:visible="noticeState.visible" closeBtn showInAttachedElement :footer="unreadList.length > 0"
      style="margin-top: 2px;">
      <template #header>
        <div class="notice-drawer-header">
          {{ $t('layout.notice.title') }}
          <div v-if="unreadList.length > 0" class="drawer-header-action-btn">
            <t-button size="small" theme="default" @click="clearNotice">
              {{ $t('layout.notice.clear') }}
            </t-button>
          </div>
        </div>
      </template>

      <t-list v-if="unreadList.length > 0" :split="false">
        <t-list-item v-for="(item, index) in unreadList" :key="index">
          <div>
            <p class="msg-content">{{ item.content }}</p>
            <p class="msg-type">{{ item.type }}</p>
          </div>
          <p class="msg-time">{{ item.date }}</p>
          <template #action>
            <t-button size="small" variant="outline" @click="setRead('radio', item)">
              {{ $t('layout.notice.setRead') }}
            </t-button>
          </template>
        </t-list-item>
      </t-list>

      <div v-else class="empty-list">
        <img
          src="" />
        <p>{{ $t('layout.notice.emptyNotice') }}</p>
      </div>

      <template #footer>
        <t-button round @click="push('/sys/common/notice').finally(() => noticeState.visible = false)">
          {{ $t('layout.notice.viewAll') }}
        </t-button>
        <t-button round @click="allRead">{{ $t('layout.notice.allRead') }}</t-button>
      </template>

    </t-drawer>
  </div>
</template>

<script setup lang="ts">
import { useNotificationStore } from '@store';
import emitter from '@/utils/mitt';

const { push } = useRouter();
const { unreadList } = useNotificationStore();

const noticeState = reactive({
  visible: false,
})

emitter.on('noticeVisible', (visible) => {
  noticeState.visible = visible
})

// 清除通知
const clearNotice = () => {
  // state.clearNotice();
}

const setRead = (_type: string, _item?: any) => {

}

// 全部已读
const allRead = () => {
  // state.setRead();
}

</script>

<style lang="less" scoped>
.notice-drawer {

  :deep(.t-drawer__header) {
    min-height: var(--td-comp-size-xxl);
  }

  :deep(.t-drawer__close-btn) {
    top: calc((var(--td-comp-size-xxl) - var(--td-comp-size-xs)) / 2);
  }

  &-header {
    width: 92%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  :deep(.t-drawer__body) {
    padding: 0;
  }

  :deep(.t-drawer__footer) {
    padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m);
    text-align: center;
  }

}

.t-list {
  // height: calc(100% - 104px);
  padding: var(--td-comp-margin-s) var(--td-comp-margin-s);
}

.t-list-item {
  overflow: hidden;
  padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
  border-radius: var(--td-radius-default);
  font: var(--td-font-body-medium);
  color: var(--td-text-color-primary);
  cursor: pointer;
  transition: background-color 0.2s linear;

  &:hover {
    background-color: var(--td-bg-color-container-hover);

    .msg-content {
      color: var(--td-brand-color);
    }

    .t-list-item__action {
      button {
        bottom: var(--td-comp-margin-l);
        opacity: 1;
      }
    }

    .msg-time {
      bottom: -6px;
      opacity: 0;
    }
  }

  .msg-content {
    margin-bottom: var(--td-comp-margin-s);
    text-align: left;
  }

  .msg-type {
    color: var(--td-text-color-secondary);
    text-align: left;
    margin-left: 15px;
  }

  .t-list-item__action {
    button {
      opacity: 0;
      position: absolute;
      right: var(--td-comp-margin-xxl);
      bottom: -6px;
    }
  }

  .msg-time {
    transition: all 0.2s ease;
    opacity: 1;
    position: absolute;
    right: var(--td-comp-margin-xxl);
    bottom: var(--td-comp-margin-l);
    color: var(--td-text-color-secondary);
  }
}

.t-list-item+.t-list-item {
  margin-left: 0;
}

// 空数据
.empty-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: var(--td-font-body-medium);
  color: var(--td-text-color-secondary);
  user-select: none;

  img {
    width: var(--td-comp-size-xxxxl);
  }

  p {
    margin-top: var(--td-comp-margin-xs);
  }
}
</style>
